<template>
  <div class="div_box">
    <div class="header">
      <el-button size="small" @click="ownerAdd" class="el_button"
        >关联业主
      </el-button>
    </div>
    <div class="content">
      <el-table
        :data="dataList"
        class="table"
        height="300"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
          height="30"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="row.username == ''">-</span>
            <span v-else>{{ row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="昵称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="mobile"
          label="手机号"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column align="center" prop="management" label="操作">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="取消关联"
              placement="bottom"
            >
              <i
                @click="delClick(row.id)"
                class="iconfont quxiaoguanlian tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <ownerAdd ref="refownerAdd" :deviceInfo="deviceInfo"></ownerAdd>
  </div>
</template>

<script>
import { reqDeviceUsergetByImei, reqDeviceUserunBind } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import ownerAdd from "./ownerAdd.vue";
export default {
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
    ownerAdd,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      dataList: [],
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {},
  methods: {
    async getDeviceUsergetByImei() {
      const res = await reqDeviceUsergetByImei(
        this.deviceInfo.imei || this.deviceInfo.deviceCode
      );
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.dataList = res.data.rows;
    },
    ownerAdd() {
      this.$refs.refownerAdd.dialogVisible = true;
    },
    // 解绑
    async delClick(id) {
      const result = await this.$confirm(
        "此操作将取消关联, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      this.reqDelFun(id);
    },
    // 请求解绑
    async reqDelFun(id) {
      const res = await reqDeviceUserunBind(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("取消关联成功");
      this.getDeviceUsergetByImei();
    },
    // 点击关闭弹框
    closeDialog() {
      this.dataList = [];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

.div_box {
  // height: calc(100vh - 212px);
  height: 100%;
  overflow: auto;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;

  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    margin-bottom: 20px;

    // display: flex;
    // justify-content: center;
    .label {
      margin: 10px 0px;

      .name {
        font-size: 16px;
      }
    }
  }

  .right {
    margin-right: 10px;
  }
}

.content {
  height: 100%;
}

.el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

.tableBtnIcon {
  font-size: 23px !important;
}
</style>